<template>
    <transition name="title">
        <h1 v-show="flag" class="hx-title">换洗害害害，害害害，害害害</h1>
    </transition>
    <button @click="flag = !flag">切换</button>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
        flag:true
    }
  },
  methods:{

  }
}
</script>

<style>
h1{
  height: 300px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.hx-title{
    background-color: greenyellow;
}
/* -enter-active 固定写法 */
/* 进入动画 */
.title-enter-active{
  /* linear 匀速 */
  /* ease 低速开始 快速 低速 */
  animation: myanim 3s ease;
}
.title-leave-active{
  /* reverse 反向 */
  animation: myanim 3s ease reverse;
}
/* 执行动画效果 */
@keyframes myanim{
    /* 从往左偏移负100%到0px这个位置 */
    from{
        /* 从什么开始 */
        /* transform: translateX(-100%); */
        transform: translateY(-100%);
        transform: translate3d();
    }
    to{
      /* 到什么结束 */
      /* transform: translateX(0px); */
       transform: translateY(0px);
    }
}
</style>
